<template>
  <div id="home" style="position: relative">
    <HeaderPage />
    <div class="content">
      <div class="courseContent">
        <div class="app-container">
          <el-row :gutter="20">
            <el-col :span="6" :xs="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>个人信息</span>
                </div>
                <div>
                  <div class="text-center">
                    <img
                      style="width: 120px; height: 120px; border-radius: 50%"
                      :src="'http://localhost:8080' + user11.avatar"
                      alt=""
                    />
                  </div>
                  <ul class="list-group list-group-striped">
                    <li class="list-group-item">
                      <i class="el-icon-user"></i>用户名称
                      <div class="pull-right">{{ user11.username }}</div>
                    </li>
                    <li class="list-group-item">
                      <i class="el-icon-phone"></i>手机号码
                      <div class="pull-right">{{ user11.phone }}</div>
                    </li>
                    <li class="list-group-item">
                      <i class="el-icon-box"></i>用户账号
                      <div class="pull-right">{{ user11.account }}</div>
                    </li>
                    <li class="list-group-item">
                      <i class="el-icon-thumb"></i>用户编号
                      <div class="pull-right">{{ user11.id }}</div>
                    </li>
                    <li class="list-group-item">
                      <i class="el-icon-date"></i>创建日期
                      <div class="pull-right">{{ user11.createTime }}</div>
                    </li>
                  </ul>
                </div>
              </el-card>
            </el-col>
            <el-col :span="18" :xs="24">
              <el-card>
                <div slot="header" class="clearfix">
                  <span>基本资料</span>
                </div>
                <el-tabs v-model="activeTab">
                  <el-tab-pane label="基本资料" name="userinfo">
                    <el-form
                      ref="form"
                      :model="form"
                      :rules="rules"
                      label-width="80px"
                    >
                      <el-form-item label="用户昵称" prop="username">
                        <el-input v-model="form.username" maxlength="30" />
                      </el-form-item>
                      <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="form.phone" maxlength="11" />
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" size="mini" @click="submitMy"
                          >保存</el-button
                        >
                      </el-form-item>
                    </el-form>
                  </el-tab-pane>
                  <el-tab-pane label="修改密码" name="resetPwd">
                    <el-form
                      ref="form"
                      :model="user2"
                      :rules="rules"
                      label-width="80px"
                    >
                      <el-form-item label="旧密码" prop="oldPassword">
                        <el-input
                          v-model="user2.oldPassword"
                          placeholder="请输入旧密码"
                          type="password"
                          show-password
                        />
                      </el-form-item>
                      <el-form-item label="新密码" prop="newPassword">
                        <el-input
                          v-model="user2.newPassword"
                          placeholder="请输入新密码"
                          type="password"
                          show-password
                        />
                      </el-form-item>
                      <el-form-item label="确认密码" prop="confirmPassword">
                        <el-input
                          v-model="user2.confirmPassword"
                          placeholder="请确认新密码"
                          type="password"
                          show-password
                        />
                      </el-form-item>
                      <el-form-item>
                        <el-button
                          type="primary"
                          size="mini"
                          @click="submitPassword"
                          >保存</el-button
                        >
                      </el-form-item>
                    </el-form>
                  </el-tab-pane>
                </el-tabs>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMyinfo, updateUserInfo, updateUserPassword } from "@/api/user";
import HeaderPage from "@/components/HeaderPage.vue";
export default {
  data() {
    return {
      activeTab: "userinfo",
      user11: {},
      form: {},
      // 表单校验
      rules: {
        username: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        oldPassword: [
          { required: true, message: "旧密码不能为空", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
          {
            pattern: /^[^<>"'|\\]+$/,
            message: "不能包含非法字符：< > \" ' \\ |",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
        ],
      },
      user2: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined,
      },
      // 表单校验
      rules2: {},
    };
  },
  components: {
    HeaderPage,
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    submitMy() {
      updateUserInfo(this.form).then((res) => {
        if (res.code === 200) {
          this.$message("修改成功");
          this.getInfo();
        }
      });
    },
    submitPassword() {
      updateUserPassword(this.user2).then((res) => {
        if (res.code === 200) {
          this.$message("修改密码成功");
          this.getInfo();
        }
      });
    },
    getInfo() {
      getMyinfo().then((res) => {
        this.user11 = res.data;
        this.form = JSON.parse(JSON.stringify(res.data));
      });
    },
  },
};
</script>

<style scoped>
.content {
  background-image: url("../../assets/images/home-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 900px;
  position: fixed;
  width: 100%;
  left: 0;
  top: 80px;
  overflow: auto;
}

.courseContent {
  padding: 20px;
  width: 80%;
  background-color: white;
  margin: 60px auto;
  border-radius: 10px;
}
.course:hover {
  cursor: pointer;
}
.list-group {
  padding-left: 0px;
  list-style: none;
}
.list-group-striped > .list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}
.list-group-item {
  border-bottom: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  margin-bottom: -1px;
  padding: 11px 0px;
  font-size: 13px;
}
.text-center {
  text-align: center;
}
.pull-right {
  float: right !important;
}
</style>
